<template>

 <t-space v-if="list.length===0"  direction="vertical" align="center" style="width:100%;margin-top: 10px;">
    <t-empty>
       <template #action>
            <t-button @click="add" >申请token</t-button>
          </template>
    </t-empty>
  </t-space>
  <t-space v-else>
    <t-list  v-model="list">
        <t-list-item v-for="item in list">
          <t-list-item-meta :title="item.key"   style="width:400px">
            <template #description>
              <t-typography-text style="width:400px" :ellipsis="true" :copyable="true" >{{item.value}}</t-typography-text>
            </template>
          </t-list-item-meta>


         <template #action>
                  <t-link theme="primary" hover="color" style="margin-left: 16px" @click="copy(item.value)"> 复制</t-link>
                <t-popconfirm content="确认删除吗" @confirm="deleteData(item.id)">
                    <t-link theme="primary" hover="color" style="margin-left: 16px"> 删除</t-link>
                  </t-popconfirm>
                </template>
        </t-list-item>
      </t-list>
  </t-space>

  <t-drawer  v-model:visible="visibleDrawer" header="申请Token" size="medium" :footer="null">
    <t-steps default-value="0" layout="vertical">
        <t-step-item title="步骤1:微信扫码" content="微信扫码登录" >
          <qrcode-vue v-if="loginQrcode!==''" :value="loginQrcode" :size="192" level="H" />
        </t-step-item>
        <t-step-item title="步骤2:申请token" content="向公众号发送字符:token 或点击公众号菜单 [会员服务]-[Token申请]" />
        <t-step-item title="步骤3:获取token" content="收到token后,系统自动保存token">

        </t-step-item>
        <!-- <t-step-item title="步骤3:获取token" content="收到短信验证码后,输入即获取token">
           <template  #extra>
                  <t-form ref="form" class="base-form" :data="formData"  label-align="right"
                        @submit="onSubmit">
                        <t-form-item label="短信验证码">
                          <t-input  placeholder="填写手机验证码"></t-input>
                        </t-form-item>
                        <t-form-item>
                          <t-button type="submit">获取token</t-button>
                        </t-form-item>
                      </t-form>
           </template>
        </t-step-item> -->
      </t-steps>


  </t-drawer>
</template>

<script setup lang="ts">
  import {
    MessagePlugin
  } from 'tdesign-vue-next';
  import {
    ref, defineEmits,onMounted,watch
  } from 'vue';

  import QrcodeVue from 'qrcode.vue';
  import {useWebsocketStore}from '@/store'
    import $eventBus from '@/utils/eventBus';
  import {
    settingModel
  } from '@/api/model/settingsModel';
  import {getSettingsList,deleteSettings,getWxLoginQrcode} from '@/api/settings'
import useClipboard from 'vue-clipboard3'

 const { toClipboard } = useClipboard()
  const emits = defineEmits(['close'])
  const formData = ref({})
  const list=ref<Array<settingModel>>([])
  const visibleDrawer=ref(false)
  const loginQrcode=ref('')
  const add=()=>{
    visibleDrawer.value=true
  }
  const onSubmit = ({validateResult,firstError}) => {
    console.log('list',JSON.stringify(list.value))
    if (validateResult === true) {
      saveSettings(list.value)
      .then(ret=>{
        list.value=ret
        MessagePlugin.success('保存成功');
      })
      .catch(e=>{
        if(e.message)
        {
          MessagePlugin.error(e.message);
        }else
        {
          MessagePlugin.error(e.msg);
        }
      })


    }
  };

  const useToken=(token:string)=>{
    localStorage.setItem('api.token',token)
  }
  const fetchData=()=>{
     getSettingsList('api.token').then(ret=>{
       list.value=ret
       if(ret.length>0)
       {
         if(ret[0].value)
         useToken(ret[0].value)
       }

     })
  }
  const fetchQrcode=()=>{

    if(visibleDrawer.value==true)
       {
           let d={
             websocketId:localStorage.getItem('websocketId'),
             sseId:'',
             inviteCode:'',
             domain:''
           }
           getWxLoginQrcode(d)
           .then(ret=>{
             loginQrcode.value=ret.url
           }).
           catch(e=>{
             console.log(e)
           })
       }
  }
  const deleteData=(id)=>{

     deleteSettings(id)
     .then(ret=>{
       MessagePlugin.success('己删除')
       fetchData()
     })
     .catch(e=>{
       if(e.message)
       {
         MessagePlugin.error(e.message)
       }else
       {
         MessagePlugin.error(e.msg)
       }
     })
  }
const copy=async (txt:string)=>{
  await toClipboard(txt)
  useToken(txt)
  MessagePlugin.success('己复制')
}

$eventBus.on('api.token.success',()=>{
  visibleDrawer.value=false
})

onMounted(()=>{
  fetchData()
})
watch(()=>visibleDrawer.value,
()=>{
  fetchQrcode();
  let interval=setInterval(()=>{
    fetchQrcode();
  },180*1000)
  if(visibleDrawer.value==false)
   {
     clearInterval(interval)
     fetchData()
   }
})

</script>

<style>
</style>
